<template>
  <view class="box">
    <view class="box-swiper">
       <swiper indicator-dots="true" class="swiper">
         <swiper-item v-for="(i,index) in swiperList" :key="index" class="aaa">
           <view class="swiper-item">
             <image :src="i.imageUrl" mode="widthFix"></image>
           </view>
         </swiper-item>
       </swiper>
    </view>
    <!-- //歌手模块 -->
    <view class="box-sing">
      <view class="box-sing-title">
           <view class="box-sing-title">热门歌手</view>
      </view>
     <view class="box-sing-body" >
       <navigator v-for="(ii,index) in singList" :key="index" :url="'/subpkg/atr_details/atr_details?id='+ii.id">
         <view class="box-sing-body-img"><image :src="ii.img1v1Url"></image></view>
         <view class="box-sing-text">{{ii.name}}</view>
       </navigator>
     </view>
    </view>
    <!-- 最新音乐 -->
    <view class="box-newmusic">
      <view class="box-newmusic-title">
        <view class="box-newmusic-title-text">最新音乐</view>
      </view>
      <view class="box-newmusic-body" v-for="(iii,index) in newMusicList" :key="index" @click='playMusic(iii)'>
      <view class="box-newmusic-left">
        <view class="box-newmusic-left-top">{{iii.name}}</view>
        <view class="box-newmusic-left-end">{{iii.song.artists[0].name}}</view>
      </view>
      <view class="box-newmusic-right">
        <view class="box-newmusic-right-img">
          <image src="../../static/开始.png"></image>
        </view>
      </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        swiperList:[],
        singList:[],
        newMusicList:[]
      }
    },
    onLoad(){
     this. getSwiper()
     this.getSing()
     this.getNewMusic()
    },
    methods: {
      async getSwiper(){
        let result = await uni.$http.get('/banner') 
        if(result.data.code==200){
          this.swiperList = result.data.banners
        }
      },
      async getSing(){
        let result = await uni.$http.get('/top/artists')
        if(result.data.code==200){
          this.singList = result.data.artists
        }
      },
     async getNewMusic(){
        let results = await uni.$http.get('/personalized/newsong')
        if(results.data.code==200){
          this.newMusicList = results.data.result
        }
      },
     async playMusic(iii){
       let result = await uni.$http.get('/check/music?id='+iii.id)
       if(result.data.message!=="ok"){
         uni.showToast({
           title:'没有版权！！！'
         })
       }
       else{
         uni.navigateTo({
           url:'/subpkg/atr_play/atr_play?id='+iii.id
         })
       }
      },
    }
  }
</script>

<style>
.swiper-item image{
  width:100%;
}
.box-sing-scroll-end image{
  width:66rpx;
  height:66rpx;
}
.box-sing-body{
  display: flex;
  overflow: auto;
  margin-top: 12rpx;
}
.box-sing-body-img image{
  width:66rpx;
}
.box-sing-body-img image{
  width:66rpx;
}
.box-sing-body-img image{
  width:300rpx;
  height:300rpx;
  margin-right:23rpx;
  border-radius: 12%;
}
.box-sing-text{
  text-align: center;
}
.box-newmusic-title{
  margin-bottom: 23rpx;
}
.box-newmusic-title-text{
  margin-top:12rpx;
}
.box-newmusic-body{
  display: flex;
  justify-content: space-between;
  height:136rpx;
  border-bottom: 1rpx solid #c0bbc0;
}
.box-newmusic-left{
  width:639rpx;
  /* background: pink; */
}
.box-newmusic-left-top,
.box-newmusic-left-end{
  margin-left:12rpx;
  white-space: nowrap;
  text-overflow:ellipsis;
  overflow: hidden;
}
.box-newmusic-left-top{
  margin-top: 23rpx;
  font-size:32rpx;
  font-weight:666;
}
.box-newmusic-left-end{
  font-size:23rpx;
  color:#c0bcbf;
  margin-top:12rpx;
}
.box-newmusic-right-img image{
  width:66rpx;
  height:66rpx;
  margin-top: 32rpx;
  margin-right:23rpx;
  /* color:#969395; */
}
</style>
